<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Youtitleit.com</title>

<link rel="stylesheet" href="css/blue/style.css" type="text/css"/>
<link rel="stylesheet" href="css/default.css" type="text/css"/>
	
<script type="text/javascript" src="dwr/interface/captionService.js"></script>  
<script type='text/javascript' src='dwr/engine.js'></script>  
<script type='text/javascript' src='dwr/util.js'></script> <!-- hace falta teniendo jquery? -->

<script src="http://www.google.com/jsapi"></script>
<script>
      google.load("swfobject", "2.1");
      google.load("jquery", "1.3.2");
</script>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> 
<script type='text/javascript' src='js/youtubeplayer-api.js'></script>
<script type='text/javascript' src='js/youtitleit.js'></script>
<script type='text/javascript'>

$(document).ready(function(){

	loadYoutubeMovie("http://www.youtube.com/v/8Mkm2cVya9U", "youtubeplayer");		

	$("#subtitleTable").tablesorter({ 
        // pass the headers argument and assing a object 
        headers: { 
            // disable sorting on all columns except the time 
            1: { sorter: false }, 2: { sorter: false }, 3: { sorter: false }    
        } 
    }); 	
});

</script>

  </head>
		
  <body>

<div id="base-div">

    <div id="header-div">
        YOUTITLEIT.COM
    </div>

    <div id="media-div">
    	<div id="player-container"> 
			<div id="player-div"></div>
		</div>

		<div>
			<table id="newSubtitleTable" class="tablesorter">
				<thead>
					<tr>
						<th>Time</th>
						<th>Duration</th>
						<th>Subtitle</th>
						<th>&nbsp;</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						
						<td><input id="newSubtitleTime" value="0" size="1" onblur="seek()"/></td>
						<td><input id="newDuration" value="4" size="1"/></td>
						<td><textarea id="newSubtitleValue">We are dead! We are all dead!</textarea></td>
						<td><button onclick="addSubtitleLine();" accesskey="a">Add (Ctrl+A)</button></td>
					</tr>
				</tbody>
			</table>
		</div>
    </div>

    <div id="editor-div">
	    <div id="subtitleTableContainer">
	    	<table id="subtitleTable" class="tablesorter" cellspacing="1">
				<thead>
					<tr>
						<th>Time</th>
						<th>Duration</th>
						<th>Subtitle</th>
						<th>&nbsp;</th>
					</tr>
				</thead>
				<!-- TODO: show the subtitle in the server (if any) -->
				<tbody id="subtitleTableBody">
					<tr>
						<td>50</td>
						<td><input value="4" maxlength="1" size="1"/></td>
						<td><textarea>value</textarea></td>
						<td><button onclick="removeSubtitleLine(event);">X</button></td>
					</tr>
				</tbody>
			</table>
		</div>
    </div>

    <div id="footer-div">
        footer
    </div>




  </body>
</html>
